<template>
  <div class="setRoleUser">
    <el-drawer title="我是标题" :visible.sync="drawerVisible" size="50%" :with-header="false" @close="cancelForm">
      <div class="drawerForm">
        <div class="pageTitle">
          <span class="titleBorder">|</span>
          <div class="titleText">管理用户</div>
          <slot name="header" />
          <el-divider />
        </div>
        <div class="userBox">
          <div class="searchDiv">
            <span>登录账号：</span>
            <el-input v-model="searchData.params.loginName" placeholder="请输入登录账号" class="searchInput" />
            <span>用户名称：</span>
            <el-input v-model="searchData.params.userName" placeholder="请输入用户名称" class="searchInput" />
            <el-button type="primary" class="topBtn" @click="searchClick">搜索</el-button>
            <div style="float: right">
              <el-button type="primary" @click="handleAdd">添加用户</el-button>
              <!-- <el-button type="danger" plain @click="handleDel">移除用户</el-button> -->
              <el-popconfirm title="确定移除用户吗？" @confirm="handleDel">
                <el-button slot="reference" style="margin-left: 10px" type="danger" plain>移除用户</el-button>
              </el-popconfirm>
            </div>
          </div>
          <myTable
            ref="myTable"
            v-loading="loading"
            style="height: calc(100% - 84px) !important"
            :row-key="'userId'"
            :table-label="tableLabel"
            :table-data="tableData"
            :table-total-size="tableTotalSize"
            :search-data="searchData"
            @getTableData="getTableData"
            @handleSelectionChange="handleSelectionChange"
          />
          <pagination
            :table-total-size="tableTotalSize"
            :search-data="searchData"
            @getTableData="$refs.myTable.getTableData()"
          />
        </div>
      </div>
    </el-drawer>
    <selectRoleUser
      v-if="selectRoleUserShow"
      ref="selectRoleUser"
      @submit="handleSubmit"
      @closeDialog="closeDialog"
    ></selectRoleUser>
  </div>
</template>

<script>
import { loadUserGridInRole, addRoleUsers, removeRoleUsers } from '@/api/system-management'
import myTable from '@/components/Table/index'
import pagination from '@/components/Table/pagination'
import selectRoleUser from './selectRoleUser.vue'
import { resetRouterMenu } from '@/router'
export default {
  name: 'SetRoleUser',
  components: {
    myTable,
    pagination,
    selectRoleUser
  },
  data() {
    return {
      drawerVisible: false,
      loading: false,
      searchData: {
        pageSize: 15,
        currentPage: 1,
        sort: {},
        params: {
          userName: ''
        }
      },
      tableData: [],
      tableLabel: [
        {
          type: 'selection',
          width: 55,
          show: true
        },
        {
          prop: 'loginName',
          label: '登录账号',
          showOverflowTooltip: true
        },
        {
          prop: 'userName',
          label: '用户名称',
          showOverflowTooltip: true
        },
        {
          prop: 'jobCode',
          label: '工号',
          width: 150,
          showOverflowTooltip: true
        },
        {
          prop: 'departmentName',
          label: '所在部门',
          width: 200,
          showOverflowTooltip: true
        }
      ],
      tableTotalSize: null,
      multipleSelection: [],
      selectRoleUserShow: false
    }
  },
  mounted() {},
  methods: {
    is(currentRow) {
      this.searchData.params.roleId = currentRow.roleId
      this.drawerVisible = true
    },
    // 取消表单
    cancelForm() {
      this.$emit('closeForm')
      this.drawerVisible = false
    },
    // 获取tableData
    getTableData(cab) {
      this.loading = true
      loadUserGridInRole(this.searchData).then((res) => {
        this.loading = false
        this.tableData = res.data.data
        this.tableTotalSize = res.data.total_count
        cab(res.data.data)
      })
    },
    // 搜索
    searchClick() {
      this.searchData.currentPage = 1
      this.$refs.myTable.getTableData()
    },
    // 复选框回调函数
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleAdd() {
      this.selectRoleUserShow = true
      this.$nextTick(() => {
        this.$refs.selectRoleUser.is(this.searchData.params.roleId)
      })
    },
    closeDialog() {
      this.selectRoleUserShow = false
    },
    handleSubmit(userIds) {
      this.selectRoleUserShow = false
      // 把选择的用户添加角色
      addRoleUsers({ roleId: this.searchData.params.roleId, userIds: userIds }).then(() => {
        if (userIds.includes(this.$store.state.user.id)) {
          resetRouterMenu()
        }
        this.$notify.success('添加用户成功')
        this.$refs.myTable.getTableData()
      })
    },
    handleDel() {
      if (this.multipleSelection.length === 0) {
        this.$notify.warning('请至少选择一条数据')
        return
      }
      // 把选择的用户移除角色
      let userIds = this.multipleSelection.map((item) => item.userId)
      removeRoleUsers({ roleId: this.searchData.params.roleId, userIds: userIds }).then(() => {
        if (userIds.includes(this.$store.state.user.id)) {
          resetRouterMenu()
        }
        this.$notify.success('移除用户成功')
        this.$refs.myTable.toggleSelection()
        this.$refs.myTable.getTableData()
      })
    }
  }
}
</script>

<style lang="less" scoped>
.setRoleUser {
  height: 100%;
  .drawerForm {
    display: flex;
    flex-direction: column;
    height: 100%;
    .userBox {
      margin: 0 15px;
      height: calc(100% - 100px);
      .searchDiv {
        margin-bottom: 10px;
        font-size: 15px;
      }
    }
  }

  .pageTitle {
    padding-top: 15px;
    padding-left: 15px;
    font-size: 20px;
    .titleBorder {
      font-weight: bold;
      font-size: 22px;
      color: #00a0e9;
      margin-right: 5px;
    }
    .titleText {
      display: inline;
      padding-right: 20px;
      padding-left: 5px;
    }
  }
}
</style>
